<template>
	<view class="container">
		<view class="notice-box">
			<text>填写资料越完整</text>
			<text>给你i推荐好工作就越多</text>
		</view>
		<view class="avatar-box">
			<view class="avatar-wrap" @click.native="uploadHandler">
				<image :src="avatarSrc"></image>
				<van-button icon="photo" type="danger">上传图片</van-button>
			</view>
		</view>
		<view class="form-box">
			<view class="title">基本资料</view>
			<van-cell-group>
				<van-cell>
					<view slot="title">
						<view class="require">姓名</view>
					</view>
					<view slot="default"><input v-model="formData.name" placeholder="请输入真实姓名" /></view>
				</van-cell>
				<van-cell>
					<view slot="title">
						<view class="require">性别</view>
					</view>
					<view slot="default"><uni-data-checkbox mode="tag" v-model="formData.sex"
							:localdata="sexList"></uni-data-checkbox></view>
				</van-cell>
				<van-cell>
					<view slot="title">
						<view class="require">生日</view>
					</view>
					<view slot="default">
						<uni-datetime-picker v-model="formData.birthday" type="date" :clear-icon="false"
							:border="false">
							<text v-if="formData.birthday">{{ formData.birthday }}</text>
							<text v-else>选择生日</text>
						</uni-datetime-picker>
					</view>
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell>
					<view slot="title">
						<view class="require">学历</view>
					</view>
					<view slot="default">
						<uni-data-picker v-model="formData.education" v-slot:default="{ data, error, options }"
							:localdata="educationList" placeholder="请选择学历" popup-title="请选择学历">
							<view v-if="error" class="error">
								<text>{{ error }}</text>
							</view>
							<view v-else-if="data.length" class="selected">
								<view v-for="(item, index) in data" :key="index" class="selected-item">
									<text>{{ item.text }}</text>
								</view>
							</view>
							<view v-else><text>请选择</text></view>
						</uni-data-picker>
					</view>
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
			</van-cell-group>
		</view>
		<view class="form-box">
			<view class="title">求职信息</view>
			<van-cell-group>
				<van-cell title="我想找">
					<view slot="default"><jsfun-picker :listArr="jobList" :defaultArr="formData.wantJobs"
							type="multiple" @okClick="wantJobsOk" /></view>
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell title="空闲时间">
					<view slot="default"><jsfun-picker2 :listArr="freeTimeList" :defaultArr="formData.freeTime"
							type="multiple" @okClick="freeTimeOk" /></view>
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell title="工作经验">
					<view slot="default">
						<my-picker :picker-list="independentMultiColumnsPickerList" @confirm="addJobExpHandler">
							<view v-show="isShowExp">
								<van-icon name="plus" color="#07C160" />
								<text style="color: #07C160;">请添加工作经验</text>
							</view>
						</my-picker>
					</view>
				</van-cell>
				<van-cell v-if="formData.jobExp.length" class="job-exp-list">
					<view class="job-exp-item" v-for="item,index in jobExpList" :key="index">
						<text>{{item[2]}}</text>
						<text>{{item[3]}}</text>
						<view @click="delJobExpHandler(index)"><van-icon name="delete-o" /><text>删除</text></view>
					</view>
				</van-cell>
			</van-cell-group>
		</view>
		<view style="padding: 30rpx;"><van-button type="danger" block @click="submitHandler">保存</van-button></view>
	</view>
</template>

<script>
	import jsfunPicker from '@/components/jsfun-picker/jsfun-picker'
	import jsfunPicker2 from '@/components/jsfun-picker/jsfun-picker2'
	import {
		updateAvatar,
		getMyResume,
		updateMyResume
	} from '@/api/user.js'
	import {
		getAllJobNames
	} from '@/api/public.js'
	export default {
		components: {
			jsfunPicker,
			jsfunPicker2,
		},
		data() {
			return {
				avatarSrc: '',
				formData: {
					name: '',
					sex: null,
					birthday: '2022-07-25',
					education: null,
					wantJobs: [],
					freeTime: [],
					jobExp: []
				},
				sexList: [{
						text: '男',
						value: 1
					},
					{
						text: '女',
						value: 2
					}
				],
				educationList: [{
						text: '小学',
						value: 1
					},
					{
						text: '初中',
						value: 2
					},
					{
						text: '中专',
						value: 3
					},
					{
						text: '高中',
						value: 4
					},
					{
						text: '大专',
						value: 5
					},
					{
						text: '本科',
						value: 6
					},
					{
						text: '硕士',
						value: 7
					},
					{
						text: 'MBA',
						value: 8
					},
					{
						text: 'EMBA',
						value: 9
					},
					{
						text: '博士',
						value: 10
					},
					{
						text: '博士后',
						value: 11
					}
				],
				jobList: [{
					id: 1,
					name: '送餐员1'
				}],
				freeTimeList: [{
						id: 0,
						name: '都可以'
					},
					{
						id: 1,
						name: '周末/节假日'
					},
					{
						id: 2,
						name: '工作日'
					},
					{
						id: 3,
						name: '寒暑假'
					}
				],
				isShowExp: true
			}
		},
		computed: {
			independentMultiColumnsPickerList() {
				let job_arr = this.jobList.map(item => {
					return {
						label: item.name,
						value: item.id
					}
				})
				let date_arr = [{
						label: '1年以内',
						value: 1
					},
					{
						label: '1年',
						value: 2
					},
					{
						label: '2年',
						value: 3
					},
					{
						label: '3年',
						value: 4
					},
					{
						label: '4年',
						value: 5
					},
					{
						label: '5年',
						value: 6
					},
					{
						label: '6年',
						value: 7
					},
					{
						label: '7年',
						value: 8
					},
					{
						label: '8年',
						value: 9
					},
					{
						label: '9年',
						value: 10
					},
					{
						label: '10年',
						value: 11
					},
					{
						label: '大于10年',
						value: 12
					}
				]
				return [job_arr, date_arr]
			},
			jobExpList() {
				let re = []

				this.formData.jobExp.forEach(item => {
					if (Array.isArray(item)) {
						let tmp = [...item]

						let find_job = this.independentMultiColumnsPickerList[0].find(o => o.value == tmp[0])
						if (find_job)
							tmp.push(find_job.label)
						let find_year = this.independentMultiColumnsPickerList[1].find(o => o.value == tmp[1])
						if (find_year)
							tmp.push(find_year.label)

						re.push(tmp)
					}
				})
				return re
			}
		},
		onLoad() {
			getAllJobNames().then(res => {
				this.jobList = res
			})
			getMyResume().then(res => {
				let {
					avatar,
					name,
					sex,
					birthday,
					education,
					wantJobs,
					freeTime,
					jobExp
				} = res
				this.avatarSrc = avatar
				this.formData = {
					name,
					sex,
					birthday,
					education,
					wantJobs,
					freeTime,
					jobExp: jobExp || []
				}
			})
		},
		methods: {
			uploadHandler() {
				this.$tools.msg('暂时无法设置头像')
				return
				let T = this
				uni.chooseImage({
					count: 1,
					success(res) {
						if (res.tempFilePaths.length > 0) {
							uni.showLoading({
								title: '上传中...'
							})
							let filePath = res.tempFilePaths[0]
							uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: Date.now() + '.jpg',
								success(res) {
									let imageUrl = res.fileID //云端返回的图片地址
									T.avatarSrc = imageUrl

									updateAvatar({
										avatar: imageUrl
									}).then(res => {
										uni.showToast({
											title: '用户头像更新成功',
											icon: 'none'
										})
									})
								},
								fail(err) {
									console.log(err)
								},
								complete() {
									uni.hideLoading()
								}
							})
						}
					}
				})
			},
			wantJobsOk(data) {
				this.formData.wantJobs = data
			},
			freeTimeOk(data) {
				this.formData.freeTime = data
			},
			addJobExpHandler(e) {
				let find = this.formData.jobExp.find(item => item[0] == e.values[0])
				if (find) {
					uni.showToast({
						title: '已经有此工作经验',
						icon: 'none'
					})

					return
				}

				this.formData.jobExp.push(e.values)
				if (this.formData.jobExp.length == 5) {
					this.isShowExp = false
					return
				}
			},
			delJobExpHandler(index) {
				let jobExp = [...this.formData.jobExp]
				jobExp.splice(index, 1)
				this.$set(this.formData, 'jobExp', jobExp)
				if (jobExp.length < 5) this.isShowExp = true
			},
			submitHandler() {
				updateMyResume({
					formData: this.formData
				}).then(res => {
					uni.showToast({
						title: '更新简历成功',
						icon: 'none'
					})
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-cell {
		padding: 20px 30px;
		align-items: center;
	}

	::v-deep .uni-data-checklist .checklist-group {
		justify-content: flex-end;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		margin-top: 0;
		margin-bottom: 0;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
		background-color: #07C160 !important;
		border-color: #07C160 !important;
	}

	::v-deep .uni-data-pickerview .tab-c .list .item-text {
		width: auto !important;
	}

	::v-deep .van-button--danger {
		background-color: #07C160;
		border-color: #07C160;
	}

	::v-deep .van-radio-group {
		display: flex;
		justify-content: flex-end;
	}

	::v-deep .van-radio {
		margin-left: 20px;
	}
</style>
<style lang="scss" scoped>
	.container {
		.notice-box {
			background-color: #07C160;
			font-size: 36rpx;
			color: #fff;
			display: flex;
			flex-direction: column;
			height: 180rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;

			&>text:nth-child(1) {
				margin-bottom: 10rpx;
			}
		}

		.avatar-box {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 380rpx;

			.avatar-wrap {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 200rpx;
					height: 200rpx;
					border: 1px solid #d4d4d4;
					margin-bottom: 20rpx;
				}
			}
		}

		.form-box {
			&>.title {
				font-size: 36rpx;
				padding: 20rpx 30rpx;
				font-weight: bold;
			}

			.require {
				position: relative;

				&::before {
					content: '*';
					position: absolute;
					color: #07C160;
					left: -10px;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.job-exp-list {
				.job-exp-item {
					display: flex;
					align-items: center;
					color: #333;
					padding: 10rpx 0;

					text {
						&:nth-of-type(1) {
							text-align: left;
							min-width: 160rpx;
						}

						&:nth-of-type(2) {
							flex: 1;
							text-align: left;
						}
					}

					&>view {
						cursor: pointer;
					}
				}
			}
		}
	}
</style>